<template>
  <div v-if="content?.speakDirection === '1'" class="component">
    <div class="head-navigation">
      <div class="headimage-container">
        <el-image :src="content?.headImageUrl" />
      </div>
      <div class="nickname-container">{{ content?.nickName }}</div>
    </div>
    <div class="content-container">{{ content?.dialogueContent }}</div>
  </div>
  <div v-if="content?.speakDirection === '2'" class="component">
    <div class="right-head-navigation">
      <div class="right-nickname-container">{{ content?.nickName }}</div>
      <div class="right-headimage-container">
        <el-image :src="content?.headImageUrl" />
      </div>
    </div>
    <div class="right-content-container">{{ content?.dialogueContent }}</div>
  </div>
  <div v-if="!content?.speakDirection" class="component" />
</template>

<script lang="ts">
import { defineComponent, PropType, watch, ref } from "vue";
export default defineComponent({
  name: "Dialogue",
  props: {
    id: {
      type: String as PropType<string>,
      default: "0000"
    },
    valueFromParent: {
      type: Object as PropType<Object>,
      required: true,
      default: {}
    }
  },
  setup(props) {
    const content = ref(props.valueFromParent.moduleValue.value);
    watch(
      () => props.valueFromParent.moduleValue.value,
      newVal => {
        content.value = newVal;
      },
      { deep: true }
    );
    return {
      content
    };
  }
});
</script>

<style scoped>
.right-content-container {
  left: 85.18px;
  top: 943.55px;
  width: 253.82px;
  min-height: 10px;
  opacity: 1;
  border-radius: 5px;
  background: #545454;
  margin: 9px -21px 5px 21px;
  overflow: auto;
}
.right-headimage-container {
  left: 80.79px;
  top: 911.05px;
  width: 42.16px;
  height: 42.16px;
  opacity: 1;
  padding-top: 15px;
  margin-right: 15px;
}
.right-nickname-container {
  width: 50px;
  min-height: 22px;
  opacity: 1;
  /** 文本1 */
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 21.22px;
  color: rgba(229, 229, 229, 1);
  text-align: left;
  vertical-align: top;
  padding-top: 25px;
}
.right-head-navigation {
  display: flex;
  justify-content: flex-end;
}
.head-navigation {
  display: flex;
}
.content-container {
  left: 85.18px;
  top: 943.55px;
  width: 253.82px;
  min-height: 10px;
  opacity: 1;
  border-radius: 5px;
  background: #545454;
  margin: -12px -21px 5px 67px;
  overflow: auto;
}
.headimage-container {
  left: 80.79px;
  top: 911.05px;
  width: 42.16px;
  height: 42.16px;
  opacity: 1;
  margin-left: 21px;
  margin-top: 21px;
}
.nickname-container {
  width: 70px;
  height: 22px;
  opacity: 1;
  /** 文本1 */
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 21.22px;
  color: rgba(229, 229, 229, 1);
  text-align: left;
  vertical-align: top;
  margin-top: 21px;
  margin-left: 15px;
}

.component {
  /* 样式 */
  color: white;
  border: 1px solid #ff8d1a;
  width: 345px;
  min-height: 100px;
  margin-top: 20px;
  background-color: #232323;
  border-radius: 10px;
  overflow: hidden;
}
</style>
